<template>
<div>
  <div class="col-sm-1">
    <div class="thumbnail">
      <img class="img-responsive user-photo" :src="message.avatar == null ? defaultIcon : message.avatar"
           alt="Comment User Avatar">
    </div>
  </div>

  <div class="col-sm-11">
    <div class="panel panel-default">
      <div class="panel-heading">
        <strong>{{ message.nickname }}</strong> <span class="pull-right">{{ message.sendTime | commentTimeFilter }}</span>
      </div>
      <div class="panel-body" v-html="content"></div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Comment',
  props: ['message'],
  data () {
    return {
      defaultIcon: require('../../assets/img/thumbs/thumb-review.jpg')
    }
  },
  computed: {
    content: function () {
      if (this.message.content == null || this.message.content === '') {
        return ''
      }
      // .replace(/\n/g, '<br/>')
      return this.message.content.replace(/\n/g, '<br/>')
    }
  }
}
</script>

<style scoped>

</style>
